import React, { Component } from 'react'
import BScroll from '@better-scroll/core'
import './tap.css';
import Swiper from 'swiper';
import 'swiper/swiper.min.css';
interface IProps {
    arrlist: Array<any>,
    getnowIndex: (index: number) => void
}

interface IState {
    nowIndex: number,

}
// react.d.ts
interface RefObject<T> {
    // immutable
    readonly current: T | null
}

export default class Tap extends Component<IProps> {
    private myRef = React.createRef<HTMLDivElement>();
    private youRef = React.createRef<HTMLDivElement>();
    private liRef = React.createRef<HTMLLIElement>();
    state = {
        nowIndex: 0,
    }
    render() {
        let arrlist = this.props.arrlist;
        console.log(this.props);

        return (
            <div className="arr">
                <div className="title" ref={this.myRef} >
                    <ul>
                        {
                            arrlist.map((item, index) => {
                                return <li key={index} ref={this.liRef} onClick={(e) => {
                                    //回调函数
                                    this.props.getnowIndex(index);
                                    //高亮

                                    this.setState({ nowIndex: index });
                                    //滑动
                                    let strClassName = this.youRef.current?.className
                                    let mySwiper = new Swiper(`.${strClassName}`.split(" ").join("."));
                                    // console.log(index);
                                    if (index === 0) {
                                        let mySwiper = new Swiper(`.${strClassName}`.split(" ").join("."), {  //轮播图 加了这一段
                                            initialSlide: 1,//加了这个 我的是三个页面切换这里写1就可以
                                        });
                                        mySwiper.slideTo(0);
                                    }
                                    //点击切换

                                    mySwiper.slideTo(index);


                                }} className={this.state.nowIndex === index ? "active1" : ""}>{item.title}</li>
                            })
                        }
                    </ul>

                </div>
                <div className="cont">
                    <div className="swiper-container" ref={this.youRef}>
                        <div className="swiper-wrapper" >
                            {
                                arrlist.map((ele, ind) => {
                                    return <div className="swiper-slide" key={ind}>
                                        {Array.isArray(this.props.children) ? this.props.children[ind] : [this.props.children]}
                                    </div>
                                })
                            }

                        </div>

                    </div>

                </div>
            </div >
        )
    }
    componentDidMount() {
        //横向滑动
        const bs = new BScroll(`.${this.myRef.current?.className}`, {
            scrollX: true,
            click: true
        });

        //swiper
        let that = this;
        let mySwiper = new Swiper(`.${this.youRef.current?.className}`, {
            direction: 'horizontal', // 横向切换选项
            preventClicksPropagation: false,//点击
            on: {//检测当前是第几个页面
                slideChangeTransitionEnd: function (e) {
                    that.setState({ nowIndex: e.realIndex });
                    //楼层
                    if (e.realIndex > 4) {
                        that.myRef.current?.scrollTo({
                            left: (e.realIndex - 4) * 73,
                            behavior: "smooth"
                        })
                    } else if (e.realIndex < 2) {
                        that.myRef.current?.scrollTo({
                            left: 0,
                            behavior: "smooth"
                        })
                    }
                },

            }
        })
    }
}

